<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仪表盘 - Spring Security Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">Security Demo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/dashboard">仪表盘</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin">管理员</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="logout(); return false;">退出登录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-5">
    <div class="jumbotron">
        <h1 class="display-4">欢迎回来，<span th:text="${username}"></span>!</h1>
        <p class="lead">您的角色：<span th:text="${roles}"></span></p>
        <hr class="my-4">

        <div>
            <p>这是用户可以访问的内容。</p>
        </div>

<!--        <div>-->
<!--            <p>您可以访问所有受保护的资源。</p>-->
<!--            <a class="btn btn-primary" href="/admin" role="button">访问管理员页面</a>-->
<!--        </div>-->

        <div class="mt-3">
            <button onclick="logout()" class="btn btn-danger">退出登录</button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 登出函数
    function logout() {
        if (confirm('确定要退出登录吗？')) {
            fetch('/api/logout', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 清除本地存储的token（如果有的话）
                    localStorage.removeItem('token');
                    // 跳转到首页
                    window.location.href = '/';
                } else {
                    alert('登出失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('登出错误：', error);
                alert('登出过程中发生错误');
            });
        }
    }
</script>
</body>
</html>
